<template>
	<!-- <z-paging ref="paging" v-model="list" @query="getList"> -->
	<view>
		<view class="tabs_1 flex-col">
		
			<u-tabs :list="tabsList" lineColor="#35bcff " :activeStyle="{
				  color: '#35bcff ',
				}" :inactiveStyle="{
				  color: '#000000',
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</view>
		<view v-if="currentTab == 0">
			<u-cell-group>
				<u-cell v-for="item in list" :key="item.id" :index="item.id">
					<view slot="title">
						<view class="name">{{item.itemname}}</view>
						<view class="date">{{item.billtime}}</view>
					</view>
					<!-- 计次卡 -->
					<view slot="value" class="text-right" >
						<view class="number" style="color: #00aa00;"><text>+</text>  {{item.getscore}}</view>
						<!-- <view class="number" style="color: #ff0000">
							<text>-</text>{{parseFloat(item.gift_times) + parseFloat(item.times ) }}
						</view> -->
						<!-- <view class="number" v-if="item.op == 2" style="color: #ffaa00"><text>+</text> {{ item.times }}<text
								v-if="item.gift_times != ''" style="color: #ff0000;">赠{{ item.gift_times}}</text></view> -->
						<!-- <view class="rest" >剩余:10次</view> -->
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view v-if="currentTab == 1">
			<u-cell-group>
				<u-cell v-for="item in list" :key="item.id" :index="item.id">
					<view slot="title">
						<view class="name">{{item.itemname}}</view>
						<view class="date">{{item.billtime}}</view>
					</view>
					<!-- 计次卡 -->
					<view slot="value" class="text-right" >
						<view class="number" style="color: #00aa00;"><text>-</text> {{item.getscore}}</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<customer-Kefu></customer-Kefu>
	</view>
	<!-- </z-paging> -->
</template>

<script>
	import {
		scorelist,
		ticket
	} from '@/common/api';
	import customerKefu from '../../components/customerKefu/customerKefu.vue';
	export default {
		components: {
			customerKefu
		},
		data() {
			return {
				list: [],
				tabsList: [
					{
						name: "收入"
					},
					{
						name: "支出"
					}
				],
				currentTab: 0,
			};
		},
		onLoad(e) {
			this.getList()
		},
		methods: {
			onClickTab({
				index
			}) {
				console.log(index, '23')
				this.currentTab = index
				this.list = []
				this.getList()
			},
			getList(page, limit) {
				scorelist({
						itemtype: this.currentTab,
					})
					.then(res => {
						console.log(res, '9966')
						this.list = res.data
					})
			},
		}
	};
</script>

<style lang="scss" scoped>
	

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;

	}

	.qline {
		position: relative;

		.l1 {
			width: 20rpx;
			height: 60rpx;
			background: #dce0fd;
			border-radius: 10rpx;
			position: absolute;
			left: 130rpx;
			bottom: -60rpx;
		}

		.l2 {
			left: auto;
			right: 130rpx;
		}
	}

	.d-qrd {
		width: 626rpx;
		min-height: 820rpx;
		background: #ffffff;
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		border-radius: 10rpx;
		margin: -22rpx auto 0;
	}

	.qcard {
		position: relative;

		.q1 {
			width: 22rpx;
			height: 22rpx;
			background: #ffffff;
			border: 4rpx solid #575c86;
			border-radius: 50%;
			box-sizing: border-box;
			position: absolute;
			left: 99rpx;
		}

		.q2 {
			left: auto;
			right: 99rpx;
		}
	}

	.d-main {
		color: #59a0ff;
	}

	.d-99 {
		color: #999;
	}

	.d-filter {
		filter: grayscale(100%);
	}

	.d-img {
		width: 8vw;
		height: 8vw;
		background-color: #ffffff;
		border-radius: 1vw;
	}

	.d-image {
		width: 7vw;
		height: 7vw;
		margin: 0.5vw 0 0 0.5vw;
	}

	.qcode {
		position: absolute;
		right: 9vw;
		top: 40vw;
		padding-top: 0.5vw;
		z-index: 999;
	}

	.qcode_b {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 998;
		background-color: #f3f3f3;
	}

	.d-du {
		padding: 0 4vw;

		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				padding: 40rpx 0;
				background-color: #ffffff;
				box-shadow: 0 0 3vw 0 rgba(0, 0, 0, 0.1);
				border-radius: 3vw;

				.number {
					color: #38bbff;
					margin-bottom: 40rpx;
					font-weight: bold;
					font-size: 5vw;
				}
			}
		}
	}
	/deep/.u-cell-group {
		margin-top: 30rpx;
		.name {
			color: #333;
			font-weight: bold;
		}
	
		.number {
			color: #ff4105;
		}
	
		.date {
			color: #ccc;
		}
	
		.rest {
			color: #9c9c9c;
		}
	
		.rest,
		.date {
			margin-top: 14rpx;
			font-size: 26rpx;
		}
	}
	.tabs_1 {
		width: 750rpx;
		height: 110rpx;
		/* position: fixed; */
		/* z-index: 999; */
		top: 610rpx;
	
		/deep/.u-tabs {
			background-color: #fff;
	
			.u-tabs__wrapper__nav__item {
				flex: 1;
			}
	
			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}
	
		.text-wrapper_1 {
			width: 506rpx;
			height: 29rpx;
			margin: 39rpx 0 0 120rpx;
	
			.text_2 {
				width: 89rpx;
				height: 29rpx;
				overflow-wrap: break-word;
				color: rgba(254, 97, 70, 1);
				font-size: 30rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 30rpx;
			}
	
			.text_3 {
				width: 86rpx;
				height: 28rpx;
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 30rpx;
				margin: 1rpx 0 0 122rpx;
			}
	
			.text_4 {
				width: 87rpx;
				height: 28rpx;
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 30rpx;
				margin: 1rpx 0 0 122rpx;
			}
		}
	
		.block_1 {
			width: 53rpx;
			height: 6rpx;
			margin: 20rpx 0 16rpx 138rpx;
	
			.section_2 {
				background-color: rgba(254, 97, 70, 1);
				border-radius: 3px;
				width: 53rpx;
				height: 6rpx;
			}
		}
	}
</style>